<template>
	<view>
		<scroll-view class="scroll-view" scroll-y @scrolltolower="getList" @refresherrefresh="getList(true)"
			:refresher-enabled="true" :refresher-triggered="refresherTriggered">
			<view class="dtyj-box">
				<view class="dtyj-item" v-for="(item,index) in list" :items="item" :key="index"
					@click="handleItem(item)">
					<view class="dtyj-status">
						{{item.feedbackStatusDesc||'-'}}
					</view>
					<view class="dtyj-type">
						{{item.warningTypeDesc||'-'}}
					</view>
					<view class="dtyj-info">
						{{item.warningInfo||'-'}}
					</view>
					<view class="dtyj-flex">
						<view class="flex-item">
							预警时间：
							<text>
								{{item.warningTime||'-'}}
							</text>
						</view>
						<view class="flex-item">
							反馈截止时间：
							<text>
								{{item.feedbackDeadline||'-'}}
							</text>
						</view>
					</view>
				</view>
				<view class="get-more" v-show="getMoreStatus">
					<text>正在加载更多。。。</text>
				</view>
				<view class="get-more" v-if="list.length&&pages.total===list.length">
					<text>没有更多了</text>
				</view>
				<empty-waybill v-show="list.length==0"></empty-waybill>

			</view>
		</scroll-view>
		<view class="search-box" v-show="searchFormShow">
			<view class="search-form">
				<view class="flex-item">
					<view class="label">预警类型：</view>
					<view class="value">
						<picker @change="({detail})=>formData.warningType=detail.value" :value="formData.warningType"
							:range="selects.warningType" range-key="label">
							<input class="uni-input" :value="formDataWarningType" disabled placeholder="请选择预警类型" />
						</picker>
						<view class="uni-icon" v-if="formDataWarningType" @click="formData.warningType=''">&#xe460;
						</view>
					</view>
				</view>
				<view class="flex-item">
					<view class="label">反馈截止时间：</view>
					<view class="value">
						<picker @change="({detail})=>formData.feedbackDeadlineStartDate=detail.value"
							:value="formData.feedbackDeadlineStartDate" mode="date">
							<input class="uni-input" :value="formData.feedbackDeadlineStartDate" disabled
								placeholder="请选择反馈截止时间" />
						</picker>
						<view class="uni-icon" v-if="formData.feedbackDeadlineStartDate"
							@click="formData.feedbackDeadlineStartDate=''">&#xe460;</view>
					</view>
				</view>
				<view class="flex-item">
					<view class="label">反馈状态：</view>
					<view class="value">
						<picker @change="({detail})=>formData.feedbackStatus=detail.value"
							:value="formData.feedbackStatus" :range="selects.feedbackState" range-key="label">
							<input class="uni-input" :value="formDataFeedbackStatus" disabled placeholder="请选择反馈状态" />
						</picker>
						<view class="uni-icon" v-if="formDataFeedbackStatus" @click="formData.feedbackStatus=''">
							&#xe460;</view>
					</view>
				</view>
				<view class="button-box">
					<view class="button-submit" @click="handleSearch">查询</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import emptyWaybill from "@/components/tool-empty/waybill";
	export default {
		components: {
			emptyWaybill
		},
		data() {
			return {
				searchFormShow: false,
				formData: {
					warningType: "",
					feedbackDeadlineStartDate: "",
					feedbackStatus: "",
				},
				formDataTemp: {},
				refresherTriggered: false,
				getMoreStatus: false,
				list: [],
				timer: null,
				pages: {
					size: 10, // 每次加载的数量
					current: 1, // 记录当前页
					total: '', // 记录总数
				},
				status: {
					1: "待反馈",
					2: "已反馈",
					3: "未反馈"
				},
				selects: {
					warningType: [{
							label: "经营许可证",
							value: "1001",
						},
						{
							label: "道路运输证",
							value: "1002",
						},
						{
							label: "车辆年审",
							value: "1003",
						},
						{
							label: "车辆技术等级评定",
							value: "1004",
						},
						{
							label: "车辆罐体",
							value: "1005",
						},
						{
							label: "从业资格证",
							value: "1006",
						},
						{
							label: "动力车数不足营运要求",
							value: "1007",
						},
						{
							label: "安全运营",
							value: "1008",
						},
					],
					feedbackState: [{
							value: "3",
							label: "未反馈",
						},
						{
							value: "2",
							label: "已反馈",
						},
						{
							value: "1",
							label: "待反馈",
						},
					],
				}
			}
		},
		computed: {
			refuseMore() {
				// 计算是否还有更多
				return this.pages.total === this.list.length;
			},
			userInfo() {
				return this.$store.state.userInfo;
			},
			formDataWarningType() {
				if (this.formData.warningType === '') {
					return '';
				}
				return this.selects.warningType[this.formData.warningType]?.label
			},
			formDataFeedbackStatus() {
				if (this.formData.feedbackStatus === '') {
					return '';
				}
				return this.selects.feedbackState[this.formData.feedbackStatus]?.label
			}
		},
		methods: {
			// 右上角点击事件
			onNavigationBarButtonTap() {
				this.searchFormShow = !this.searchFormShow;
			},
			handleSearch() {
				if (this.formData.feedbackDeadlineStartDate) {
					this.formDataTemp.feedbackDeadlineStartDate = this.formData.feedbackDeadlineStartDate;
					this.formDataTemp.feedbackDeadlineEndDate = this.formData.feedbackDeadlineStartDate;
				} else {
					this.formDataTemp.feedbackDeadlineStartDate = '';
					this.formDataTemp.feedbackDeadlineEndDate = '';
				}
				if (this.formData.warningType !== '') {
					this.formDataTemp.warningType = this.selects.warningType[this.formData.warningType]?.value;
				} else {
					this.formDataTemp.warningType = '';
				}
				if (this.formData.feedbackStatus !== '') {
					this.formDataTemp.feedbackStatus = this.selects.feedbackState[this.formData.feedbackStatus]?.value;
				} else {
					this.formDataTemp.feedbackStatus = '';
				}
				this.searchFormShow = false;
				this.getList(true);
			},
			// 跳转详情/反馈
			handleItem(item) {
				const data = {
					id: item.id,
					ownerName: item.ownerName,
					warningTypeDesc: item.warningTypeDesc,
					warningInfo: item.warningInfo,
					warningTime: item.warningTime,
					feedbackDemand: item.feedbackDemand,
					feedbackDate: item.feedbackDate,
					feedbackDeadline: item.feedbackDeadline,
					feedbackExplain: item.feedbackExplain,
					feedbackStatusDesc: item.feedbackStatusDesc,
				}
				const params = Object.keys(data).map(key => key + '=' + data[key]).join('&');
				this.$goBack('./fankui?' + params)
			},
			// 加载，刷新
			getList(isRefresh = false) {
				if (this.timer) {
					return false;
				}
				if (isRefresh === true) {
					this.list = [];
					this.refresherTriggered = true;
					this.pages.current = 1;
					this.pages.total = 0;
				} else {
					if (this.refuseMore) {
						return false;
					}
					this.getMoreStatus = true;
					this.pages.current++;
				}
				// console.log(this.$store.state.userInfo)
				const data = {
					...this.formDataTemp
				}
				if (this.userInfo.userRoleType == 3) {
					data.empInfoId = this.userInfo.empInfoId;
				} else {
					data.ownerId = this.userInfo.ownerId;
				}
				const formData = Object.assign(data, this.pages);
				if (this.$store.getters.getUserType == 0 && this.type == 0) {
					formData.approvalState = 1
				} else {
					formData.type = this.type == 0 ? '' : this.type;
				}
				this.timer = true;
				this.$api.realTimeWarningFeedback(formData).then((res) => {
					this.timer = false;
					const resData = res.data.data;
					// console.log(resData)
					if (isRefresh == true) {
						this.list = resData.records;
					} else {
						this.list = this.list.concat(resData.records);
					}
					this.pages.total = resData.total;
					this.$emit('input', resData.total); // 修改父页面的角标数据
					this.refresherTriggered = false;
					this.getMoreStatus = false
				}).catch(() => {
					this.timer = false;
					this.refresherTriggered = false;
					this.getMoreStatus = false
				})
			}
		},
		mounted() {
			this.getList(true);
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-view {
		background: #F2F2F2;
		height: 100vh;
		min-height: 100vh;
		overflow: auto;
	}

	.search-box {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.2);

		.search-form {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			border-radius: 8rpx;
			background-color: #fff;
			padding: 20rpx;

			.flex-item {
				display: flex;
				align-items: center;
				padding: 10rpx 0;

				.label {
					width: 7em;
					text-align: right;
				}

				.value {
					flex: 1;
					position: relative;

					.uni-input {
						height: 40rpx;
						border-radius: 3px 3px 3px 3px;
						border: 1px solid #ddd;
					}

					.uni-icon {
						position: absolute;
						top: 0;
						right: 0;
						width: 70rpx;
						text-align: center;
						height: 70rpx;
						line-height: 70rpx;
						font-size: 36rpx;
					}
				}
			}

			.button-box {
				text-align: center;
				padding: 40rpx 0;

				.button-submit {
					display: inline-block;
					margin: 0 30rpx;
					border-radius: 8rpx;
					width: 70%;
					text-align: center;
					font-size: 32rpx;
					line-height: 84rpx;
					background-color: $app-color;
					color: #fff;
				}
			}
		}
	}

	.dtyj-box {
		padding: 20rpx 0 84rpx;
		position: relative;

		.dtyj-item {
			background-color: #fff;
			margin: 20rpx 20rpx 0;
			border-radius: 8rpx;
			overflow: hidden;
			padding: 20rpx;
			position: relative;
			box-shadow: 0px 0px 4rpx 1rpx rgba(0, 0, 0, 0.2);

			&:nth-child(1) {
				margin-top: 0;
			}

			.dtyj-status {
				position: absolute;
				right: 0;
				top: 0;
				padding: 0 20rpx;
				background-color: #F2BA38;
				border-radius: 0 8rpx 0 8rpx;
				color: #fff;
				line-height: 50rpx;
				font-size: 28rpx;
				min-width: 3em;
			}

			.dtyj-type {
				color: #333;
				font-size: 32rpx;
				line-height: 32rpx;
			}

			.dtyj-info {
				color: #333;
				font-size: 30rpx;
				line-height: 42rpx;
				text-align: justify;
				padding: 20rpx 0 10rpx;
			}

			.dtyj-flex {
				display: flex;
				justify-content: space-between;

				.flex-item {
					color: #999999;
					font-size: 24rpx;

					text {
						color: #333;
					}
				}
			}
		}

		.get-more {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			text-align: center;
			line-height: 3em;
			font-size: 28rpx;
			color: #666666;
		}
	}
</style>